<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title langWord="t:Product_List">Porduct List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../resources/css/mui.css">
    <link rel="stylesheet" href="../../resources/css/style.css">
    <link rel="stylesheet" href="../../resources/css/product/listtest.css">
    <script src="../../resources/assets/mui.js"></script>
    <script src="../../resources/assets/avalon.js"></script>
    <script src="../../resources/assets/jquery-2.0.3.min.js"></script>
    <script src="../../resources/js/lang/en.js"></script>
    <script src="../../resources/js/dahua.config.js"></script>
    <script src="../../resources/js/common.js"></script>
    <script src="../../resources/js/product/listtest.js"></script>
</head>

<body ms-controller="listtestPage">

    <!--侧滑菜单容器-->
    <div id="filterCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
        <!--菜单部分-->
        <aside class="mui-off-canvas-left">
            <div class="mui-scroll-wrapper">
                <!-- <ul class="mui-table-view" style="z-index:9999999">
                    <list>
                        <li class=" mui-table-view-divider mui-indexed-list-group category_title ">Product Category</li>
                        <li class="mui-table-view-divider mui-indexed-list-group filter_select ">
                            <select name="sid " id="sid " class="mui-select " ms-duplex="@categoryId " data-duplex-changed="chooseCategory ">
                                        <option ms-for="child in @data.categorys " ms-attr="{ 'value': @child.id} ">{child.name}</option>
                                    </select>
                        </li>
                        <li class="mui-table-view-divider mui-indexed-list-group filter_select ">
                            <select name="sid " id="subcategory " class="mui-select " ms-duplex="@subCategoryId " data-duplex-changed="chooseSubCategory ">
                                        <option ms-for="child in @data.subcategorys " ms-attr="{ 'value': @child.id} ">{child.name}</option>
                                    </select>
                        </li>
                        <li ms-if="@data.facets.length>0" class="mui-table-view-divider mui-indexed-list-group category_title">Fundamental Options</li>
                    </list>
                </ul> -->
                <div class="mui-scroll">
                    <div class="mui-indexed-list">
                        <div class="mui-indexed-list-alert"></div>
                        <div class="mui-indexed-list-inner">
                            <form id="facetForm">
                                <input type="hidden" name="cid" id="cid" ms-attr="{value: @cid}" />
                                <ul class="mui-table-view">
                                    <list>
                                        <li class="mui-table-view-divider mui-indexed-list-group category_title" langWord="t:Product_Product_Category">Product Category</li>
                                        <li class="mui-table-view-divider mui-indexed-list-group filter_select">
                                            <select name="sid" id="sid" class="mui-select" ms-duplex="@categoryId" data-duplex-changed="chooseCategory">
												<option ms-for="child in @data.categorys" ms-attr="{'value': @child.id}">{child.name}</option>
											</select>
                                        </li>
                                        <li class="mui-table-view-divider mui-indexed-list-group filter_select">
                                            <select name="sid" id="subcategory" class="mui-select" ms-duplex="@subCategoryId" data-duplex-changed="chooseSubCategory">
                                                <option ms-for="child in @data.subcategorys" ms-attr="{'value': @child.id}">{child.name}</option>
                                            </select>
                                        </li>
                                        <li ms-if="@data.facets.length>0" class="mui-table-view-divider mui-indexed-list-group category_title">Fundamental Options</li>
                                    </list>

                                    <list ms-for="facet in @data.facets" ms-if="@facet.childs.length>0">
                                        <li class="mui-table-view-divider mui-indexed-list-group">{facet.name}
                                        </li>
                                        <li class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left" ms-for="value in @facet.childs" id="Attr">
                                            <input type="checkbox" name="facetbox" class="icheckbox" ms-duplex-checked='isChecked(@value.id)' ms-attr="{'value': @value.id,'id':@value.id}" /> {value.name|replace()}
                                        </li>
                                    </list>
                                </ul>
                                <div class="mui-row h-60">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mui-bar mui-bar-tab filter-btn">
                <a class="mui-tab-item mui-btn-outlined resetBtn" href="javascript:void(0);" langWord="t:Reset">
						Reset
					</a>
                <a class="mui-tab-item mui-btn-danger searchBtn" href="javascript:void(0);" ms-attr="{'data-id': 'yesSearch'}" langWord="t:Yes">
						Yes
					</a>
            </div>

        </aside>

        <div class="mui-inner-wrap">
            <header class="mui-bar mui-bar-nav header">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-icon-white left_back"></a>
                <h1 id="title" class="mui-title" langWord="t:Product_List">Products List</h1>
                <a class="mui-icon iconfont mui-pull-right mui-icon-white layout">
                    <!-- <i class="icon icon_category"></i> -->
                </a>
                <!-- <a class="mui-icon iconfont mui-pull-right mui-icon-white search mr5" href="search.html">
                    <i class="icon icon_search mt0"></i>
                </a> -->
                <div class="filter-bar mui-bar header">
                    <div class="mui-col-xs-5 mui-pull-left">
                        <a href="javascript:void(0);" class="mui-icon filterBtn mui-icon-white" id="pop">
                            <i class="icon icon_screening"></i> <span langWord="t:Filter">Filter</span>
                        </a>
                    </div>
                    <button class="mui-btn mui-pull-right startCompare compareBtn list_compare">
							<i class="icon icon_compare"></i>{compare.btnText}
						</button>
                </div>
            </header>

            <div id="productList" class="mui-content mui-scroll-wrapper mt91">
                <div class='noData mui-hidden' ms-html="@noProductData"></div>
                <div class="mui-scroll ">
                    <div class="mui-row catItems" ms-if="@data.childs.length>0" ms-attr="{id: @child.id}">
                        <!-- <div class="mui-row catItems" ms-for="child in @data.childs" ms-if="@child.products.length>0" ms-attr="{id: @child.id}"> -->
                        <!-- <div class="mui-row whitebg" ms-class="{'mui-hidden': ((@child.productCounts<=6)&&(''==child.name))}">
                            <div class="mui-col-xs-12 pro_title">
                                <p>{child.name}</p>
                                <span ms-attr="{'data-id': @child.id,'id':'cat'+@child.id}" ms-class="{'mui-hidden': (@child.productCounts<=6)}" class="getMore">
										<i class="icon btn-more"></i>
										<a style="color: #1B1B1B;" href="#" >more</a>
									</span>
                            </div>
                        </div> -->

                        <ul class="mui-table-view mui-table-view-chevron products-view" ms-class="{'mui-grid-view': (true == @layout)}">
                            <li class="mui-table-view-cell product mui-media mui-col-xs-12" ms-for="product in @data.childs" ms-class="{'mui-col-xs-4': (true == @layout)}">
                                <a href="pdp.html" ms-attr="{'data-id': @product.id}">
                                    <img class="mui-media-object mui-pull-left" ms-attr="{src: @product.image}" onerror="imgError(this)">
                                    <div class="mui-media-body">
                                        {product.partnumber|replace()}
                                        <p class='mui-ellipsis'>
                                            {product.productName|replace()}
                                        </p>
                                    </div>
                                </a>
                                <input type="checkbox" ms-attr="{value: @product.id,id:@product.id}" class="icheckbox mui-hidden pro" ms-change="compare.selected(product.id)" />
                            </li>
                        </ul>

                        <script>
                            mui(".products-view").on('tap', 'a', function() {
                                if ($(".compareBtn").hasClass("startCompare")) {
                                    var url = this.getAttribute('href');
                                    var id = this.getAttribute('data-id');
                                    mui.openWindow({
                                        url: url + "?id=" + id
                                    });
                                }
                            });
                        </script>
                    </div>
                    <div class='noData mui-hidden' ms-html="@noProductData"></div>
                </div>
            </div>
            <div class="mui-off-canvas-backdrop"></div>

            <!--底部导航-->
            <footer class="mui-bar mui-bar-tab footer">
                <a id="defaultTab" data-id="1" class="mui-tab-item mui-active" href="category.html">
                    <span class="mui-icon icon icon_product active"></span>
                    <span class="mui-tab-label" langWord="t:index_Product">Product</span>
                </a>
                <a class="mui-tab-item" href="../solution/category.html">
                    <span class="mui-icon icon icon_solution"></span>
                    <span class="mui-tab-label" langWord="t:index_Solution">Solution</span>
                </a>
                <a id="partner" class="mui-tab-item mui-hidden" href="../partner/index.html">
                    <span class="mui-icon icon icon_partner"></span>
                    <span class="mui-tab-label" langWord="t:index_Partner">Partner</span>
                </a>
                <a class="mui-tab-item" href="../user/user.html">
                    <span class="mui-icon icon icon_usercenter"></span>
                    <span class="mui-tab-label" langWord="t:index_User_Center">User Center</span>
                </a>
            </footer>
            <script>
                mui(".footer").on('tap', 'a', function() {
                    sessionStorage.clear()
                });
            </script>
        </div>
    </div>

</body>

</html>